<template>
  <div class="selctCourse">
    <el-breadcrumb separator="/" class="breadcrumb-bottom">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>毕业设计</el-breadcrumb-item>
      <el-breadcrumb-item>学生申请毕设题目</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="box">
      <h3 class="title">
        可申请课题
      </h3>

      <el-table
        :data="selectTable"
        style="width: 100%"
      >
        <el-table-column
          prop="graduateTitle"
          label="课题名称"
          min-width="120"
          sortable>
        </el-table-column>
        <el-table-column
          prop="titleSource"
          label="课题来源"
          min-width="120"
          sortable>
        </el-table-column>
        <el-table-column
          prop="num"
          label="要求人数"
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="itemCategoryName"
          label="项目类别名称"
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="itemCategoryID"
          label="项目类别编号"
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="courseFile"
          label="课题附件"
          min-width="120">
          <template scope="scope">
            <el-button type="text" size="small" @click.native.prevent="showTitleAttachment(scope.row.titleAttachment)">
              {{scope.row.titleAttachmentName}}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="申请课题"
          min-width="120">
          <template scope="scope">
            <el-button
              @click="applicationProject(scope.row.graduateProgramID)"
              type="text"
              size="small">
              申请
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          min-width="80">
          <template scope="scope">
            <el-button
              @click.native.prevent=""
              type="text"
              size="small">
              下载附件
            </el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>


    <div class="box">
      <h3 class="title">
        已选择课题
      </h3>

      <el-table
        :data="selectedTable"
        style="width: 100%"
      >
        <el-table-column
          prop="graduateTitle"
          label="课题名称"
          min-width="120"
          sortable>
        </el-table-column>
        <el-table-column
          prop="titleSource"
          label="课题来源"
          min-width="120"
          sortable>
        </el-table-column>
        <el-table-column
          prop="num"
          label="要求人数"
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="itemCategoryName"
          label="项目类别名称"
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="itemCategoryID"
          label="项目类别编号"
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="courseFile"
          label="课题附件"
          min-width="120">
          <template scope="scope">
            <el-button type="text" size="small" @click.native.prevent="showTitleAttachment(scope.row.titleAttachment)">
              {{scope.row.titleAttachmentName}}
            </el-button>
            <el-button
              @click.native.prevent=""
              type="text"
              size="small">
              下载
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="删除"
          min-width="120">
          <template scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, selectedTable)"
              type="text"
              size="small">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
  </div>
</template>
<script>
  export default{
    name: 'selectCourse',
    data(){
      return {
        selectTable: [],
        selectedTable: [],
        apiUrl: this.$until.url + '/graduateProgram/getGraduateProgramStudent',
        appUrl: this.$until.url + '/graduateProgram/addStudentGraduate',
        deleteUrl: this.$until.url + '/graduateProgram/deleteStudentGraduate',
      }
    },
    mounted: function () {
      this.$nextTick(function () {
        this.res()
      });
    },
    methods: {
      res(){
        this.$http.get(this.apiUrl, {
            params: {
              studentID: '201320010101'
            }
          }
        ).then((res) => {
          console.log(res)
          this.selectTable = res.body.all;
          this.selectedTable = res.body.student
        }, (err) => {
          console.log('服务器异常')
        })
      },
      showTitleAttachment(titleAttachment){
        window.open(this.$until.url + '/' + titleAttachment)
      },
      applicationProject(graduateProgramID){
        this.$confirm('是否申请课题?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.get(this.appUrl, {
              params: {
                studentID: '201320010101',
                graduateProgramID: graduateProgramID
              }
            }
          ).then((res) => {
            this.$notify({
              title: '成功',
              message: '申请成功',
              type: 'success'
            });
            this.res()
          }, (err) => {
            this.$notify.error({
              title: '错误',
              message: '申请失败'
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      deleteRow(index, rows) {
        this.$confirm('此操作将删除该课题, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.get(this.deleteUrl, {
              params: {
                studentID: '201320010101'
              }
            }
          ).then((res) => {
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success'
            });
            this.res()
            rows.splice(index, 1);
          }, (err) => {
            this.$notify.error({
              title: '错误',
              message: '删除失败'
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      open() {
        this.$alert('课题无误', '申请课题', {
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          callback: action => {
            /*this.$message({
             type: 'info',
             message: `action: ${ action }`
             });*/
          }
        });
      }
    }
  }
</script>
<style>
  .box {
    margin: 20px 0;
  }

  .box .title {
    margin-bottom: 10px;
    font-family: GulimChe;
    color: royalblue;
  }
</style>
